<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: lxc
 * @Date: 2020-12-16 13:25:36
 * @LastEditors: lxc
 * @LastEditTime: 2020-12-23 20:19:59
-->
<template>
    <div class="login"
         :style="{'height':height+'px'}">
        <h2>记一笔</h2>
        <a-form :rules="rules"
                :model="form"
                :label-col="labelCol"
                :wrapper-col="wrapperCol"
                ref="ruleForm">

            <a-form-item label="昵称"
                         required
                         v-if="isRegister">
                <a-input style="width:200px"
                         placeholder="请输入您的登录邮箱"
                         v-model:value="form.name" />
            </a-form-item>
            <a-form-item label="邮箱"
                         name="email">
                <a-input style="width:200px"
                         placeholder="请输入您的登录邮箱"
                         v-model:value="form.email" />
            </a-form-item>
            <a-form-item label="密码"
                         name="password">
                <a-input style="width:200px"
                         placeholder="请输入密码"
                         type='password'
                         prefix-icon="el-icon-s-goods"
                         v-model:value="form.password"
                         show-password
                         @keyup.enter.native="isRegister ? register('ruleForm') :login('ruleForm')" />
            </a-form-item>
            <a-form-item label="确认密码"
                         v-if="isRegister"
                         name="password">
                <a-input style="width:200px"
                         placeholder="请输入密码"
                         type='password'
                         prefix-icon="el-icon-s-goods"
                         v-model:value="form.password2"
                         show-password
                         @keyup.enter.native="isRegister ? register('ruleForm') :login('ruleForm')" />
            </a-form-item>
            <div style="display:flex;margin-left:120px">
                <a-button @click="login('ruleForm')"
                          v-if="!isRegister"
                          @keyup.enter.native="login('ruleForm')">登&nbsp;&nbsp;录</a-button>
                <a-button @click="register('ruleForm')"
                          style="margin:0 20px;">注&nbsp;&nbsp;册</a-button>
                <a-button v-if="isRegister"
                          @click="isRegister = !isRegister"
                          style="margin-right:20px;">返&nbsp;&nbsp;回</a-button>
            </div>

        </a-form>
        <!-- <a-footer>由 云袭智慧在线科技发展(北京)有限公司 提供技术支持&版权所有</a-footer> -->
    </div>
</template>
<script>
import { reactive, toRefs, computed, ref, onMounted, isReactive, } from 'vue';
import { current, registers, logins } from '../api/index.ts'
import { useRouter } from 'vue-router';

export default {
    setup(props, context) {
        const router = useRouter();
        const state = reactive({
            password: '',
            email: '',
            labelCol: { span: 8 },
            wrapperCol: { span: 10 },
            height: document.body.clientHeight || window.screen.height,
            isRegister: false
        });
        const rules = reactive(
            {
                email: [{ required: true, message: '登录邮箱不能为空', trigger: 'blur' }],
                password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
            },
        )
        const form = reactive({ email: '', password: '', password2: '', name: '' })
        const login = () => {
            state.isRegister = false;
            localStorage.setItem('email', form.email);
            localStorage.setItem('password', form.password);
            logins(form).then(res => {
                if (res.token) {
                    localStorage.setItem('token', res.token)
                    router.push({ path: "/workBench" });
                }
            })
        }
        const register = () => {
            if (!state.isRegister) {
                state.isRegister = true;
            } else {
                if (!state.name == '') {
                    message.console.error('名字不能为空');
                    return
                }
                registers(form).then(res => {
                    state.isRegister = false;
                })
            }
        }
        onMounted(() => {
            
            var email = localStorage.getItem('email')
            var password = localStorage.getItem('password')
            email && (form.email = email);
            password && (form.password = password);
            console.log();
        })
        return {
            ...toRefs(state),
            login,
            rules,
            form,
            register

        }
    }
}
</script>
<style lang="less" scoped>
.login {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
/deep/.ant-form {
  width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
